<template>
    <el-row>
        <el-col align="right">
            <div class="pageCon">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="paginationOptions.currentPage"
                    :page-sizes="[10, 30, 50, 100]"
                    :page-size="10"
                    layout="total,slot,prev"
                    :total="total"
                >
                    <el-button :disabled="firstPageBtnDisabled" class="btn" @click="toFirstPage">首页</el-button>
                </el-pagination>
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="paginationOptions.currentPage"
                    :page-sizes="[10, 30, 50, 100]"
                    :page-size="10"
                    layout="pager,next,slot,sizes,jumper"
                    :total="total"
                >
                    <el-button :disabled="lastPageBtnDisabled" class="btn" @click="toLastPage">末页</el-button>
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component
export default class PaginationPanel extends Vue {
    @Prop({
        default: 0,
    })
    public total: number;
    @Prop({
        default: false,
    })
    public reset: boolean;
    public paginationOptions = {
        skip: 0,
        count: 10,
        currentPage: 1,
    };
    public lastPageNum = 0;
    /* 重置当前页 */
    @Watch('reset')
    public reloadChange(val: boolean) {
        if (val) {
            this.paginationOptions.currentPage = 1;
        }
    }
    @Watch('total')
    public totalChange(newVal, oldVal) {
        this.total = newVal;
        this.lastPageNum = Math.ceil(newVal / this.paginationOptions.count);
    }

    mounted() {}

    public firstPageBtnDisabled = true;
    public lastPageBtnDisabled = false;

    public handleCurrentChange(val) {
        this.firstPageBtnDisabled = val === 1 ? true : false;
        this.lastPageBtnDisabled = val === Math.ceil(this.total / this.paginationOptions.count) ? true : false;
        this.paginationOptions.currentPage = val;
        this.paginationOptions.skip = (this.paginationOptions.currentPage - 1) * this.paginationOptions.count;
        this.$emit('onPaginationChange', this.paginationOptions);
    }
    public handleSizeChange(val) {
        this.paginationOptions.count = val;
        this.paginationOptions.currentPage = 1;
        this.handleCurrentChange(this.paginationOptions.currentPage);
        if (Math.ceil(this.total / val) < this.paginationOptions.currentPage) {
            this.paginationOptions.skip = 0;
        } else {
            this.paginationOptions.skip = (this.paginationOptions.currentPage - 1) * this.paginationOptions.count;
            this.$emit('onPaginationChange', this.paginationOptions);
        }
    }

    toFirstPage() {
        this.handleCurrentChange(1);
    }
    toLastPage() {
        this.paginationOptions.currentPage = Math.ceil(this.total / this.paginationOptions.count);
        this.handleCurrentChange(this.paginationOptions.currentPage);
    }
}
</script>

<style lang="scss" scoped>
.el-pagination {
    float: left;
}
.pageCon {
    float: right;
    position: relative;
    top: 10px;
}
.pageCon >>> .btn {
    border: 1px solid #dcdfe6;
}
/deep/ .el-pagination__total,
/deep/ .el-pagination__jump {
    color: #000000 !important;
}
/deep/ .el-pagination.is-background .el-pager li {
    font-weight: 500 !important;
    color: #000 !important;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #fff !important;
}
/deep/ .el-pagination {
    padding-left: 0;
    padding-right: 0;
}
</style>
